<!DOCTYPE html>
<html>
<head>
	<title>cssfloat</title>
	<meta charset="utf-8"/>
	<style type="text/css">
	*{margin:0px;padding:0px;}
	.box{ width:500px;height:30px;background: red;line-height: 30px;margin-bottom: 100px; }
	.box label{ border:1px blue solid;width:120px; }

	.box span{ float: right;border:1px blue solid;
		/*width:120px;  */
	}
	/*.btn1{ border:1px red solid;padding:3px 10px;text-decoration: none; }*/
	</style>
</head>
<body>
	<div class="box">
		<label>这是标题title</label>
		<span>2015-05-28</span>
	</div>
	<p>IE6/7显示：<img src="1.jpg" align="center"></p>
	<p>正常的显示：<img src="2.jpg" align="center"></p>
	<!-- <a href="" class="btn1">这是按钮</a> -->
	<p>查了一下资料：<a href="http://w3help.org/zh-cn/causes/RM8005">RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部</a></p>
	<p><a href="http://www.zhangxinxu.com/wordpress/?p=594">CSS float浮动的深入研究、详解及拓展(二)</a></p>
	<p>很清楚的说明了，这是个bug，这是在IE67下产生的bug，产生条件是：<br/>1、同一个父容器内有多个行内元素；<br/>
2、某些为非浮动元素，某些为浮动元素（可以是左浮动或右浮动）；<br/>
3、浮动的子元素不都是位于非浮动的子元素之前。</p>

<h3>解决办法也有3种：使用绝对定位模拟右浮动、使用 IE hack 专门在IE6 IE7 中设置负的上外边距、将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。</h3>
<p>1、使用绝对定位（position:absolute）模拟右浮动（float:right）。 为了避免 IE6 IE7 的这个 BUG，可以不使用右浮动，而是用绝对定位及右偏移（right:XXXpx），如为右浮动元素设置 'position:absolute' 及 'right:3px' 替代 'float:right'，但这样做的代价是必须为父容器 DIV 元素设置 'postion:relative'，这么做仍然会破坏原文档结构。所以我们并不推荐此方法。</p>
<p>2、使用 IE hack 专门在IE6 IE7 中设置负的上外边距（margin-top:-XXXpx）。 既然此 Bug 为IE6 IE7 专有，则只需要在 IE6 IE7 下为右浮动元素设置一个负的上外边距即可，其他浏览器保持原样式。所以可以考虑使用只有 IE6 IE7支持的 hack 方式：在 CSS 特性前加星号 '*'。如 *margin:-23px 5px 0 0，这样既可消除 IE6 IE7 中的 Bug，但是这么做是利用了浏览器的 Bug，并没有消除 Bug。在能有个更好的解决方法的时候，不推荐使用 CSS hack 来解决问题。</p>
<p>3、调整SPAN元素的位置。 通过上面总结的 Bug 触发条件，我们可以考虑直接调整父容器中 SPAN 子元素的位置来回避 IE6 IE7 中此 Bug，即将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。</p>
</body>
</html>